<template>
<div class="container">
  <headers title="任务详情" :refresh="isRefresh" path="/kaishizhuan"></headers>
  <nav class="bar bar-tab">
    <a class="tab-item" v-link="{path: '/home', replace: true}">
      <span class="icon icon2 home-icon"></span>
      <span class="tab-label">首页</span>
    </a>
    <a class="tab-item" v-link="{path: '/tuijianma', replace: true}">
      <span class="icon icon2 tuijianma-icon"></span>
      <span class="tab-label">推荐码</span>
    </a>
    <a class="tab-item" v-link="{path: '/ucenter', replace: true}">
      <span class="icon icon2 ucenter-icon"></span>
      <span class="tab-label">个人中心</span>
    </a>
  </nav>
  <div class="content">
    <div class="list-block no-margin">
      <ul>
        <li class="item-content">
          <div class="item-media"><i class="icon-taskds icon-item-wifi"></i></div>
          <div class="item-inner">
            <div class="item-title label">公众号</div>
            <div class="item-after color-light">{{taskDetail.publicNumber}}</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-media"><i class="icon-taskds icon-item-user"></i></div>
          <div class="item-inner">
            <div class="item-title label">被投人</div>
            <div class="item-after color-light">{{taskDetail.votedName}}</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-media"><i class="icon-taskds icon-item-yongjin"></i></div>
          <div class="item-inner">
            <div class="item-title label">佣金</div>
            <div class="item-after color-light">{{taskDetail.bowlerGold}}&nbsp;<i class="icon-taskdetail icon-coin"></i></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-block no-margin mar-top-10">
      <ul>
        <li>
          <div class="item-content">
            <div class="item-title label">备注详情内容：</div>
          </div>
          <div class="item-content-row">
            {{taskDetail.description}}
          </div>
          <!-- Slider -->
          <div class="swiper-container" v-if="imgLen > 0">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="img in taskDetail.imgUrl">
                <img :data-src="img" class="swiper-lazy">
                <div class="swiper-lazy-preloader swiper-lazy-preloader"></div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div style="width:100%;height:65px;"></div>
    <div class="content-block no-margin" v-if="unStart">
      <div class="col-50">
        <a class="button button-big button-fill button-danger" @click="reciveTask">
          开始任务
        </a>
      </div>
    </div>
    <div class="content-block row no-margin" v-if="isStart">
      <div class="col-50 no-margin-left">
        <a class="button button-big button-fill button-success" @click="shareWX">
          分享至微信
        </a>
      </div>
      <div class="col-50 mar-left-8p">
        <a class="button button-big button-fill button-info" @click="doUpload">
          上传截图
        </a>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import $ from 'zepto'
import Headers from '../components/Headers'
import Swiper from '../assets/js/swiper.min.js'
import store from '../assets/js/store.min.js'

export default {
  ready () {
    $.init()
    this.getTaskDetail()
    this.getIsStartTasks()
    this.getLogo()
  },
  data () {
    return {
      taskDetail: [],
      taskId: this.$route.params.taskId,
      customerId: store('customerId') || 0,
      logoimg: '',
      swiper: null,
      imgLen: 0,
      submitTag: true,
      isStart: false,
      unStart: true,
      recievedTasks: [],
      customerTaskId: '',
      isRefresh: false
    }
  },
  methods: {
    getTaskDetail () {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/taskDetail/' + this.taskId)
      .then((data) => {
        data.data.imgUrl = (data.data.imgUrl === null) ? [] : data.data.imgUrl.split(',')
        this.$set('taskDetail', data.data)
        this.$set('imgLen', data.data.imgUrl.length)
        if (this.imgLen > 0) {
          setTimeout(() => {
            this.swiper = new Swiper('.swiper-container', {
              loop: false,
              lazyLoading: true
            })
          }, 500)
        }
      }, (xhr) => {
        $.alert('网络异常')
      })
    },
    reciveTask () {
      if (!this.submitTag) {
        return false
      }
      this.submitTag = false
      $.showIndicator()
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/customerRequiredTask', {
        params: {
          taskId: this.taskId,
          customerId: this.customerId
        }
      }).then((data) => {
        if (data.data.success) {
          $.hideIndicator()
          this.isStart = true
          this.unStart = false
          $.alert(data.data.message)
          this.getIsStartTasks()
        }
        else {
          $.hideIndicator()
          $.alert(data.data.message)
          this.submitTag = true
        }
      }, (xhr) => {
        $.hideIndicator()
        $.alert('网络异常')
        this.submitTag = true
      })
      return true
    },
    getIsStartTasks () {
      let tasks = null
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findCustomerRequiredTask', {
        params: {
          customerId: this.customerId
        }
      }).then((data) => {
        tasks = data.data
        if (tasks) {
          tasks.forEach((val) => {
            if (val.id.toString() === this.taskId.toString()) {
              this.isStart = true
              this.unStart = false
              this.customerTaskId = val.customerTaskId
            }
          })
        }
      })
    },
    getLogo () {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findLogo').then((data) => {
        if (data.data.success) {
          this.$set('logoimg', data.data.logo)
        }
      })
    },
    shareWX () {
      let u = navigator.userAgent
      let arr = {title: this.taskDetail.voteTypeName, url: this.taskDetail.link, imgUrl: this.logoimg, content: this.taskDetail.description}
      if (this.inArray(this.taskDetail.voteTypeId, ['D22A31179FA1499B928385F98EFA10B2', 'EAC411DEC3E948C79AD8F0B890A90FE6']) > -1) {
        arr.content = '任务类型：' + arr.title + '\n任务说明：' + arr.content
      }
      else if (this.taskDetail.voteTypeId === '267A386B69A440429F04ECBB2D9C022B') {
        arr.content = '点赞对象：' + this.taskDetail.votedName + '\n任务说明：' + arr.content
      }
      else {
        arr.content = '被投人：' + this.taskDetail.votedName + '\n任务说明：' + arr.content
      }
      if (!!u.match(/AppleWebKit.*Mobile.*/) && (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1)) {
        try {
          window.Android.share(arr.title, arr.content, arr.url, arr.imgUrl)
        }
        catch (e) {
          console.warn(e)
        }
      }
      if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        try {
          window.webkit.messageHandlers.shareWX.postMessage(arr)
        }
        catch (e) {
          console.warn(e)
        }
      }
    },
    inArray (needle, array) {
      let index = -1
      let len = array.length
      if (typeof needle === 'string' || typeof needle === 'number') {
        for (let i = 0; i < len; i++) {
          if (needle === array[i]) {
            index = i
            break
          }
        }
      }
      return index
    },
    doUpload () {
      this.$router.replace({path: '/upload/' + this.taskId + '/' + this.customerTaskId})
    }
  },
  components: {
    Headers
  }
}
</script>
<style scoped>
@import '../assets/css/swiper.min.css';
.swiper-wrapper{width:100%;padding:10px 15px;}
.swiper-wrapper img{width:92%;}

.icon-taskds{
  background-size:100%;
}
.icon-taskds.icon-item-wifi {
  width: 15px;
  height: 15px;
  background-image: url("../assets/images/public/wifi.png");
}
.icon-taskds.icon-item-user {
  width: 15px;
  height: 15px;
  background-image: url("../assets/images/public/user.png");
}
.icon-taskds.icon-item-yongjin {
  width: 15px;
  height: 15px;
  background-image: url("../assets/images/public/chongzhi.png");
}

.list-block .item-content{
  padding-left: 15px!important;
  overflow:hidden;
}
.list-block .item-content-row{
  padding:0 15px;
}
.list-block .item-content:after {
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  right:auto;
  top:auto;
  height:1px;
  width:100%;
  background-color:#e7e7e7;
  display:block;
  z-index:15;
  -webkit-transform-origin:50% 100%;
  transform-origin:50% 100%;
}
.content-block{
  width:100%;
  position:fixed;
  bottom:65px;
  z-index:999;
}
.icon-taskdetail.icon-coin{
  display:inline-block;
  vertical-align:middle;
  background-size:100% auto;
  background-position:center;
  -webkit-font-smoothing:antialiased;
  -webkit-text-stroke-width:.2px;
  width:18px;
  height:18px;
  background-image:url(../assets/images/public/icon-coin.png);
}
</style>